<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="anime.js"></script>
  <script type="text/javascript">
  function init() {
    let red = document.getElementById('red');
    let blue = document.getElementById('blue');
    let green = document.getElementById('green');
    let yellow = document.getElementById('yellow');

    var basicTimeline = anime.timeline({
      loop: true,
      autoplay: false
    });

    basicTimeline
      .add({
        targets: '#boxes .box.red',
        translateY: 250,
        easing: 'easeOutExpo'
      })
      .add({
        targets: '#boxes .box.blue',
        translateY: 250,
        easing: 'easeOutExpo'
      })
      .add({
        targets: '#boxes .box.green',
        translateY: 250,
        easing: 'easeOutExpo'
      })
      .add({
        targets: '#boxes .box.yellow',
        translateY: 250,
        easing: 'easeOutExpo'
      });

    document.querySelector('#boxes .play').onclick = basicTimeline.play;

    document.querySelector('#boxes .pause').onclick = basicTimeline.pause;

    document.querySelector('#boxes .reverse').onclick = function() {
      basicTimeline.reverse();
    }
    document.querySelector('#boxes .resume').onclick = function() {
      basicTimeline.play();
      basicTimeline.restart();
    }
  }
  </script>
</head>

<body onload="init();">
  <div id="boxes">
    <div id="btns">
      <button class="play">
        <i class="fa fa-play-circle" >Play</i>
      </button>
      <button class="pause">
        <i class="fa fa-pause-circle" >Pause</i>
      </button>
      <button class="reverse">
        <i class="fa fa-reverse-circle" >Reverse</i>
      </button>
      <button class="resume">
        <i class="fa fa-resume-circle" >Resume</i>
      </button>
    </div>
    <div class="box red" id="red"></div>
    <div class="box blue" id="blue"></div>
    <div class="box green" id="green"></div>
    <div class="box yellow" id="yellow"></div>
  </div>
</body>

</html>